<template>
  <div class="custom-field-config">
    <!-- 标签页切换 -->
    <div class="tab-container">
      <el-radio-group
        v-model="activeName"
        size="large"
        class="custom-radio-group"
        @change="setActive"
      >
        <el-radio-button label="1" class="custom-radio-button">线索配置</el-radio-button>
        <el-radio-button label="2" class="custom-radio-button">客户配置</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 新增按钮 -->
    <div class="add-button-container">
      <el-button type="primary" @click="add" class="add-btn">
        <Icon icon="ep:plus" class="btn-icon" />
        新增
      </el-button>
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
      <ClueFile
        v-if="activeName == 1 || activeName == 2"
        :listData="listData"
        @edit="edit"
        @success="getList"
      />
    </div>

    <FormTable ref="formRefs" @success="getList" />
  </div>
</template>

<script setup>
import * as customFieldApi from '@/api/crm/module/index.ts'
import ClueFile from './components/clue.vue'
import FormTable from './formTable.vue'
const activeName = ref('1')
const props = defineProps({
  moduleId: {
    type: Number
  }
})
const setActive = () => {
  getList()
}

const listData = ref([])
/**list*/
const getList = async () => {
  const result = await customFieldApi.customFieldHeadList({
    moduleId: props.moduleId,
    tableType: activeName.value
  })
  listData.value = result
}
const formRefs = ref(null)
/**add*/
const add = () => {
  formRefs.value.open('create', null, props.moduleId, activeName.value)
}
/**update*/
const edit = (item) => {
  formRefs.value.open('update', item, props.moduleId, activeName.value)
}
watch(
  () => props.moduleId,
  (val) => {
    if (val) getList()
  },
  { immediate: true, deep: true }
)
</script>

<style scoped>
.custom-field-config {
  padding: 16px;
  background: #f8f9fa;
}

/* 标签页容器 */
.tab-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

.custom-radio-group {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 4px;
  border: 1px solid #e4e7ed;
}

.custom-radio-button {
  margin: 0;
}

.custom-radio-button :deep(.el-radio-button__inner) {
  background: transparent;
  border: none;
  color: #606266;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-radio-button :deep(.el-radio-button__inner:hover) {
  color: #0052cc;
  background: rgba(0, 82, 204, 0.1);
}

.custom-radio-button :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: #0052cc;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.3);
  transform: translateY(-1px);
}

/* 新增按钮容器 */
.add-button-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
}

.add-btn {
  background: #0052cc;
  border-color: #0052cc;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.add-btn:hover {
  background: #003d99;
  border-color: #003d99;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
}

.btn-icon {
  font-size: 16px;
}

/* 内容容器 */
.content-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-field-config {
    padding: 12px;
  }

  .tab-container {
    padding: 16px;
    margin-bottom: 12px;
  }

  .custom-radio-group {
    width: 100%;
  }

  .custom-radio-button :deep(.el-radio-button__inner) {
    padding: 10px 16px;
    font-size: 14px;
  }

  .add-button-container {
    padding: 16px;
    margin-bottom: 12px;
    justify-content: center;
  }

  .add-btn {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }

  .content-container {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .custom-field-config {
    padding: 8px;
  }

  .tab-container {
    padding: 12px;
  }

  .custom-radio-button :deep(.el-radio-button__inner) {
    padding: 8px 12px;
    font-size: 13px;
  }

  .add-button-container {
    padding: 12px;
  }

  .add-btn {
    padding: 8px 20px;
    font-size: 13px;
  }

  .content-container {
    padding: 8px;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

/* 动画效果 */
.tab-container,
.add-button-container,
.content-container {
  transition: all 0.3s ease;
}

.tab-container:hover,
.add-button-container:hover,
.content-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 主题色变量 */
:root {
  --primary-color: #0052cc;
  --primary-hover: #003d99;
  --primary-light: #f0f7ff;
  --border-color: #e4e7ed;
  --text-color: #303133;
  --bg-color: #f8f9fa;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-radio-group--large .el-radio-button__inner) {
  font-size: 14px;
}
</style>
